import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { message, Modal } from 'antd';
import { PrimaryC, TableC, ModalC } from '../../../../comps';
import { VTComponents, VTScroll } from 'virtualizedtableforantd';
import config from '../../../../utils/tableMoreIdConfig';
import uuid from 'es6-uuid';
import moment from 'moment';
@connect(({ loading, historyPriceM }) => ({
  loading,
  historyPriceM,
}))
export default class HistoryPriceC extends PureComponent {
  state = {
    columns: undefined,
    dataSource: undefined,
    columnsDefault: [
      {
        title: '定价日期',
        key: 'dataDt',
        type: 'date',
      },
      {
        title: '证券代码',
        key: 'tradingCode',
      },
      {
        title: '证券简称',
        key: 'secuabbr',
      },
      {
        title: '成本法定价结果',
        key: 'valuationPrice',
        type: 'money',
        toFixed: 4,
      },
      {
        title: '复核状态',
        key: 'reviewStatus',
      },
    ],
  };
  componentDidMount() {
    console.log(this.props.productCode, this.props.securityCode, '1');
    this.props.onRef(this);
    this.getTableData(this.props.searchData);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.searchData) != JSON.stringify(this.props.searchData)) {
      this.getTableData(nextProps.searchData);
    }
  }
  // 获取表格数据
  getTableData = (searchData) => {
    if (searchData['productCode'] && searchData['securityCode']) {
      this.setState(
        {
          columns: undefined,
          dataSource: undefined,
        },
        () => {
          this.props.dispatch({
            type: 'historyPriceM/getTableDate',
            payload: {
              // valuationDate:'2022-09-30',
              currentPage: 1,
              numInPage: 9999,
              type: '3',
              ...searchData,
            },
            callback: (type, data) => {
              if (type == 'success') {
                let tempColumns = _.cloneDeep(this.state.columnsDefault);
                tempColumns?.forEach((item) => {
                  if (item.key == 'secuabbr') {
                    // 证券名称
                    item.ellipsis = true;
                  }
                  if (item.key == 'tradingCode') {
                    // 证券代码
                    item.width = '20%';
                  }
                  if (item.key == 'reviewStatus') {
                    // 复核状态
                    item.width = '20%';
                    item.render = (text) => {
                      if (text == null || text == undefined) return '--';
                      return <span style={{ color: text == '1' ? '#2FB098' : text == '2' ? '#F4423A' : 'inherit' }}>{text == '1' ? '已复核' : text == '2' ? '未复核' : text}</span>;
                    };
                  }
                  if (item.key == 'valuationPrice') {
                    // 估值结果
                    item.width = '20%';
                  }
                });

                this.setState({
                  columns: tempColumns,
                  dataSource: data?.map((item) => {
                    item.id == uuid(16);
                    return item;
                  }),
                });
              } else {
                this.setState({
                  columns: [],
                  dataSource: [],
                });
              }
            },
          });
        },
      );
    }
  };
  //批量复核
  batchConfirm = () => {
    console.log('&&7');
    this.props.changePage('6'); //页面展示为批量复核页面
  };
  //刷新页面
  refresh = () => {
    this.getTableData(this.props.searchData);
  };

  render() {
    const { columns, dataSource } = this.state;
    return (
      <div>
        <div style={{ marginBottom: '20px', textAlign: 'right' }}>
          <PrimaryC title='批量复核' onClick={this.batchConfirm} />
        </div>
        <div>
          <TableC
            columns={columns}
            dataSource={dataSource}
            hidePage={true}
            rowKey='id'
            scroll={{ x: '100%', y: '530px' }}
            components={VTComponents({
              id: config.nonValue['nonValue'],
              destroy: true,
            })}
          />
        </div>
      </div>
    );
  }
}
